<template>
  <div class="wrapper" ref="wrapper">
    <div class="centent">
      <slot />
    </div>
    <div class="load-wrapper" v-show="loading && isLoading">
      <van-loading type="spinner" color="red" />
      <span class="load-text">加载中</span>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'

export default {
  props: {
    pullDown: Boolean,
    pullUpLoad: Boolean,
    listenScroll: Boolean,
    touchEnd: Boolean,
    loading: {
      type: Boolean,
      default: true
    },
    probeType: {
      type: Number,
      default: 1
    },
    bounce: {
      type: Boolean,
      default: true
    },
    preventDefault: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: null
    },
    delay: {
      type: Number,
      default: 20
    },
    stopPropagation: Boolean,
  },
  data() {
    return {
      scroll: null,
      isLoading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.scroll) return

      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, this.initConfig())
        this.initEvent()
      })
    },
    initConfig() {
      let config = {
        click: true,
        tap: true,
        preventDefault: this.preventDefault,
        bounce: this.bounce,
        probeType: this.probeType,
        stopPropagation: !!this.stopPropagation
      }
      if (this.pullDown) {
        config.pullDownRefresh = {
          threshold: 50,
          stop: 35
        }
      }
      if (this.pullUpLoad) {
        config.pullUpLoad = {
          threshold: 150
        }
      }
      if (this.listenScroll) {
        config.probeType = 3
      }
      return config
    },
    initEvent() {
      if (this.pullDown) {
        this.scroll.on('pullingDown', () => {
          this.isLoading = true
          setTimeout(() => {
            this.refresh()
          })
          this.$emit('pullingDown', () => {
            this.isLoading = false
            this.scroll.finishPullDown()
            this.scroll.refresh()
          })
        })
      }
      if (this.pullUpLoad) {
        this.scroll.on('pullingUp', () => {
          this.isLoading = true
          setTimeout(() => {
            this.refresh()
          })
          this.$emit('pullingUp', () => {
            this.isLoading = false
            this.scroll.finishPullUp()
            this.scroll.refresh()
          })
        })
      }
      if (this.listenScroll) {
        this.scroll.on('scroll', pos => {
          this.$emit('scroll', pos)
        })
      }
      if (this.touchEnd) {
        this.scroll.on('touchEnd', pos => {
          this.$emit('touchEnd', pos)
        })
      }
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    enable() {
      this.scroll &&  this.scroll.enable.apply(this.scroll)
    },
    disable() {
      this.scroll &&  this.scroll.disable.apply(this.scroll)
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.scroll.refresh()
      }, this.delay)
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper{
  position: relative;
  height: 100%;
  .load-wrapper{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    .load-text{
      margin-left: 10px;
    }
  }
}
</style>